<!--表格-->
<template>
  <div class="table_box">
    <!--   查询模块-->
    <div class="search_box">
      <el-form
        ref="searchDate"
        :inline="true"
        :model="searchDate"
        class="demo-form-inline"
      >
        <el-form-item label="订单号：" prop="warehouseName">
          <el-input
            v-model="searchDate.orderNumber"
            placeholder="请输入订单号"
          ></el-input>
        </el-form-item>
        <el-form-item label="用户：" prop="phone">
          <el-select
            v-model="searchDate.username"
            filterable
            no-data-text="暂无数据"
            placeholder="请选择用户"
          >
            <el-option
              v-for="(item, index) in tableDate"
              :key="index"
              :label="item.username"
              :value="item.username"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="时间：" prop="phone">
          <el-date-picker
            v-model="searchDate.createTime"
            :default-time="['00:00:00']"
            end-placeholder="结束日期"
            start-placeholder="开始日期"
            type="datetimerange"
            value-format="yyyy-MM-dd HH:mm:ss"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit">查询</el-button>
          <el-button class="rest_btn" @click="resetForm()">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
    <!--   新增模块-->
    <div class="add">
      <el-button :orderType="orderType" type="primary" @click="openDialog"
        >生成订单</el-button
      >
    </div>
    <div class="unpaid_table">
      <div class="summary_table">
        <el-table
          :data="tableDate"
          :header-cell-style="{
            background: 'rgba(227,189,189,0.53)',
            border: 'none',
            color: '#000',
          }"
          border
          :height="'100%'"
          style="width: 100%"
        >
          <el-table-column
            label="创建时间"
            prop="createTime"
            sortable
            width="160"
          >
          </el-table-column>
          <el-table-column label="用户名" prop="username" width="140">
          </el-table-column>
          <el-table-column label="订单号" width="220">
            <template slot-scope="scope">
              <span>{{ scope.row.transaction.orderNumber }}</span>
            </template>
          </el-table-column>
          <el-table-column label="支付类型" prop="paymentType" width="140">
          </el-table-column>
          <el-table-column label="交易金额（元）/数量" width="200">
            <template slot-scope="scope">
              <span class="orange_text">{{ scope.row.transaction.money }}</span>
              /
              <span class="blue_text">{{
                scope.row.transaction.quantity
              }}</span>
            </template>
          </el-table-column>
          <el-table-column label="抵押总金额（元）/数量" width="200">
            <template slot-scope="scope">
              <span class="orange_text">{{ scope.row.pledge.money }}</span> /
              <span class="red_text">{{ scope.row.pledge.quantity }}</span>
            </template>
          </el-table-column>
          <el-table-column label="商品金额(元)" width="155">
            <template slot-scope="scope">
              <span class="orange_text">{{ scope.row.amount }}</span>
            </template>
          </el-table-column>
          <el-table-column label="备注" prop="remark" width="140">
          </el-table-column>
          <el-table-column label="状态" width="80">
            <template slot-scope="scope">
              <span class="orange_text">{{ scope.row.status }}</span>
            </template>
          </el-table-column>
          <el-table-column fixed="right" label="操作" width="230">
            <template slot-scope="scope">
              <span
                class="blue_text operation_btn"
                @click="openDetails(scope.row)"
                >详情</span
              >
              <span class="green_text operation_btn">线下支付</span>
              <span class="green_text operation_btn">系统支付</span>
              <span
                class="red_text operation_btn"
                @click="deleteOrder(scope.$index)"
                >删除</span
              >
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div v-if="detailsShow" class="details_table">
        <div class="table_title">
          {{ detailsTable[0].transaction.orderNumber }}订单详情
        </div>
        <el-table
          :data="detailsTable"
          :header-cell-style="{
            background: 'rgba(227,189,189,0.53)',
            border: 'none',
            color: '#000',
          }"
          border
          height="260"
          style="width: 100%"
        >
          <el-table-column
            label="修改时间"
            prop="createTime"
            sortable
            width="160"
          >
          </el-table-column>
          <el-table-column label="商品" prop="productName" width="180">
            <template slot-scope="scope">
              <span>{{ scope.row.transaction.productName }}</span>
            </template>
          </el-table-column>
          <el-table-column label="数量" sortable width="120">
            <template slot-scope="scope">
              <span>{{ scope.row.transaction.quantity }}</span>
            </template>
          </el-table-column>
          <el-table-column label="单价（元）" width="100">
            <template slot-scope="scope">
              <span>{{ scope.row.transaction.money }}</span>
            </template>
          </el-table-column>
          <el-table-column label="抵押数量" width="100">
            <template slot-scope="scope">
              <span>{{ scope.row.pledge.quantity }}</span>
            </template>
          </el-table-column>
          <el-table-column label="抵押金额" width="100">
            <template slot-scope="scope">
              <span>{{ scope.row.pledge.money }}</span>
            </template>
          </el-table-column>
        </el-table>
        <div class="table_title">
          {{ detailsTable[0].transaction.orderNumber }}订单日志
        </div>
        <el-table
          :data="detailsTable"
          :header-cell-style="{
            background: 'rgba(227,189,189,0.53)',
            border: 'none',
            color: '#000',
          }"
          border
          height="260"
          style="width: 100%"
        >
          <el-table-column
            label="修改时间"
            prop="createTime"
            sortable
            width="160"
          >
          </el-table-column>
          <el-table-column label="操作人" prop="username"> </el-table-column>
          <el-table-column label="用户名" prop="username"> </el-table-column>
          <el-table-column label="状态" width="80">
            <template>
              <span>创建订单</span>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
    <!--      编辑弹窗-->
    <Dialog ref="dialog" :orderType="orderType" @addList="addList"></Dialog>
  </div>
</template>
<script>
import Dialog from "./dialog";

export default {
  props: {
    orderType: {
      type: Number,
      default: 1,
    },
    tableDate: {
      type: Array,
      default: () => [
        {
          createTime: "", // 创建时间
          username: "", // 用户名

          paymentType: "", // 支付类型
          transaction: {
            // 交易金额（元）/数量
            money: 0,
            quantity: 0,
            orderNumber: "", // 订单号
            productName: "",
          },
          pledge: {
            // 抵押总金额（元）/数量
            money: 0,
            quantity: 0,
          },
          amount: "", // 商品金额
          remark: "", // 备注
          status: "", // 状态
        },
      ],
    },
  },
  data() {
    return {
      searchDate: {
        createTime: "", // 创建时间
        username: "", // 用户名
        orderNumber: "", // 订单号
      },
      // 详情数据.
      detailsTable: [],
      detailsShow: false, // 详情列表控制变量
      detailsId: "", // 记录详情列表的订单号
    };
  },
  components: { Dialog },
  watch: {
    orderType() {
      this.$nextTick();
    },
  },
  methods: {
    // 打开详情表单
    openDetails(list) {
      // 第一次点击详情，或点击不同的订单详情，显示详情表，否则隐藏
      if (
        this.detailsTable === "" ||
        list.transaction.orderNumber !== this.detailsId
      ) {
        this.detailsTable = [];
        this.detailsTable.push(list);
        this.detailsId = list.transaction.orderNumber;
        this.detailsShow = true;
      } else {
        this.detailsId = "";
        this.detailsShow = false;
      }
    },
    // 查询
    onSubmit() {
      this.$message({
        message:
          "创建时间：" +
          this.searchDate.createTime +
          "   用户名" +
          this.searchDate.username,
        type: "success",
      });
    },
    // 重置查询表单
    resetForm() {
      this.$refs.searchDate.resetFields();
    },
    // 新增数据
    addList(list) {
      // 新增id
      let listDate = JSON.parse(list);
      // listDate.id = this.warehouseList.length + 1;
      // push
      listDate.forEach((item) => {
        this.tableDate.push(item);
      });
    },
    // 删除仓库数据
    deleteOrder(index) {
      this.tableDate.splice(index, 1);
    },
    // 拉起编辑弹窗，传入数据, type =（1 表示新增，2 表示修改）
    openDialog() {
      // 调用子组件的开启
      this.$refs.dialog.showDialog();
    },
  },
};
</script>
<style scoped>
.table_box {
  padding-top: 20px;
}

/*表格*/
.unpaid_table {
  margin-top: 20px;
  margin-bottom: 5px;
  display: flex;
}

/*汇总表*/
.summary_table {
  min-width: 55%;
  box-shadow: 2px 0 10px rgba(196, 158, 158, 0.2);
}

/*详情表*/
.details_table {
  margin-left: 20px;
  min-width: 40%;
}

.details_table .el-table {
  margin: 8px 0;
}

/*表头名字*/
.table_title {
  font-size: 18px;
  font-weight: 700;
}

/*解决element表格固定列的下边框*/
/deep/ .el-table__fixed-right::before,
/deep/ .el-table__fixed::before {
  height: 0 !important;
  z-index: 0 !important;
}
</style>
